<template>
    <div>
        <el-container>
            <el-header>
                <!--                background-color: #19AE88-->
                <div class="background"
                     style=" width: 100%;height: 100%;display: flex;justify-content: space-between;">
                    <span class="guanli" style="color: #ffffff">有点甜后台管理</span>


                    <div style="border: 0!important;display: flex;justify-content: space-around;align-items: center">
                        <div style="color: #ffffff;border-bottom: 0!important;margin-right: 30px">您的身份是:{{roleName}}
                        </div>
                        <div style="color: #ffffff;border-bottom: 0!important;margin-right: 90px">欢迎 {{realname}}</div>
                        <div @click="toIndex"
                             style="cursor: pointer;color: #ffffff;border-bottom: 0!important;margin-right: 20px">返回首页
                        </div>
                        <div @click="handleCommand"
                             style="cursor: pointer;color: #ffffff;border-bottom: 0!important;margin-right: 40px">退出
                        </div>

                        <!--                        <div style="border: 0;margin-right: 5px">-->
                        <!--                            <el-image-->
                        <!--                                    style="width: 40px; height: 40px;border-radius: 20px;margin-right: 10px"-->
                        <!--                                    :src="user.avatar"-->
                        <!--                                    :preview-src-list="[user.avatar]"-->
                        <!--                                    :fit="cover"></el-image>-->
                        <!--                        </div>-->
                        <!--                        <el-dropdown style="border: 0" @command="handleCommand">-->
                        <!--  <span class="el-dropdown-link" style="color:#95B6CF">-->
                        <!--    <span style="color:#95B6CF">{{user.nickname}}</span><i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
                        <!--  </span>-->
                        <!--                            <el-dropdown-menu slot="dropdown">-->
                        <!--                                <el-dropdown-item command="a">返回首页</el-dropdown-item>-->
                        <!--                                <el-dropdown-item command="b">退出</el-dropdown-item>-->

                        <!--                            </el-dropdown-menu>-->
                        <!--                        </el-dropdown>-->
                    </div>
                </div>
            </el-header>
            <el-container>
<!--                 calc(100vh - 60px);-->
                <el-aside width="205px" style="height: calc(100vh - 60px);margin-top: 0;border-top: 0">
                    <el-row style="height: 100%" class="tac">
                        <el-col style="height: 100%">
                            <el-menu
                                    background-color="#304156"
                                    :router="true"
                                    :collapse-transition="true"
                                    text-color="#95B6CF"
                                    style="height: 100%;overflow: hidden"
                                    default-active="adminindex"
                                    class="el-menu-vertical-demo"
                            >
                                <!--                                <el-submenu index="1"-->

                                <!--                                >-->
                                <!--                                    <template slot="title">-->
                                <!--                                        <i class="el-icon-location"></i>-->
                                <!--                                        <span>管理员管理</span>-->
                                <!--                                    </template>-->
                                <el-menu-item-group>
                                    <!--                                        <el-submenu index="1-4">-->
                                    <!--                                            <i class="el-icon-goods"></i>-->
                                    <!--                                            <template slot="title">商品管理</template>-->
                                    <!--                                            <el-menu-item index="1-4-1">-->
                                    <!--                                                <i class="el-icon-goods"></i>-->

                                    <!--                                                商品列表</el-menu-item>-->
                                    <!--                                            <el-menu-item index="1-4-1">-->
                                    <!--                                                <i class="el-icon-goods"></i>-->

                                    <!--                                                商品列表</el-menu-item>-->
                                    <!--                                          -->
                                    <!--                                        </el-submenu>-->
                                    <!--                                        <el-menu-item index="product">-->
                                    <!--                                            <i class="el-icon-goods"></i>-->

                                    <!--                                            商品管理-->
                                    <!--                                        </el-menu-item>-->
                                    <!--                                        el-icon-light-rain-->
                                    <!--                                        <template slot="title">分组一</template>-->
                                    <!--                                        <el-menu-item index="category">-->
                                    <!--                                            <template slot="title">-->
                                    <!--                                                <i class="el-icon-light-rain"></i>-->
                                    <!--                                                <span>分类管理</span>-->
                                    <!--                                            </template>-->

                                    <!--                                        </el-menu-item>-->

                                    <el-menu-item v-for="item in permissionList" v-if="" :index="item.permissionPath">
                                        <template slot="title">
                                            <i :class="item.icon"></i>
                                            <span>{{item.permissionName}}</span>
                                        </template>


                                    </el-menu-item>
<!--                                    <el-menu-item v-for="item in permissionList" v-if="" :index="item.permissionPath">-->
<!--                                        <template slot="title">-->
<!--                                            <i class="el-icon-user"></i>-->
<!--                                            <span>{{item.permissionName}}</span>-->
<!--                                        </template>-->


<!--                                    </el-menu-item>-->
                                    <!--                                        <el-menu-item index="order">-->
                                    <!--                                            <template slot="title">-->
                                    <!--                                                <i class="el-icon-light-rain"></i>-->
                                    <!--                                                <span>订单管理</span>-->
                                    <!--                                            </template>-->
                                    <!--                                        </el-menu-item>-->

                                    <!--                                        <el-menu-item index="adminstory">-->
                                    <!--                                            <template slot="title">-->
                                    <!--                                                <i class="el-icon-collection-tag"></i>-->
                                    <!--                                                <span>故事管理</span>-->
                                    <!--                                            </template>-->
                                    <!--                                        </el-menu-item>-->


                                    <!--                                        <el-menu-item-group>-->
                                    <!--                                            <template slot="title">分组一</template>-->
                                    <!--                                            <el-menu-item index="1-1">选项1</el-menu-item>-->
                                    <!--                                            <el-menu-item index="1-2">选项2</el-menu-item>-->
                                    <!--                                        </el-menu-item-group>-->

                                </el-menu-item-group>
                                <!--                                <el-submenu index="5">-->
                                <!--                                    <template slot="title">-->
                                <!--                                        <i class="el-icon-location"></i>-->
                                <!--                                        <span>权限管理</span>-->
                                <!--                                    </template>-->

                                <!--                                    <el-menu-item index="role">角色列表</el-menu-item>-->
                                <!--                                    <el-menu-item index="permission">权限列表</el-menu-item>-->

                                <!--                                    &lt;!&ndash;                                    <el-submenu index="1-4">&ndash;&gt;-->
                                <!--                                    &lt;!&ndash;                                        <el-menu-item index="1-4-1">选项1</el-menu-item>&ndash;&gt;-->
                                <!--                                    &lt;!&ndash;                                    </el-submenu>&ndash;&gt;-->
                                <!--                                </el-submenu>-->

                                <!--                                </el-submenu>-->

                                <!--                             11-->
                                <!--                                <el-submenu index="2"-->

                                <!--                                >-->
                                <!--                                    <template slot="title">-->
                                <!--                                        <i class="el-icon-location"></i>-->
                                <!--                                        <span>普通用户管理</span>-->
                                <!--                                    </template>-->
                                <!--                                    <el-menu-item-group>-->
                                <!--                                        &lt;!&ndash;                                        el-icon-light-rain&ndash;&gt;-->
                                <!--                                        &lt;!&ndash;                                        <template slot="title">分组一</template>&ndash;&gt;-->
                                <!--                                        <el-menu-item index="admintype">-->
                                <!--                                            <template slot="title">-->
                                <!--                                                <i class="el-icon-light-rain"></i>-->
                                <!--                                                <span>分类管理</span>-->
                                <!--                                            </template>-->

                                <!--                                        </el-menu-item>-->


                                <!--                                        <el-menu-item index="admincomment">-->
                                <!--                                            <template slot="title">-->
                                <!--                                                <i class="el-icon-reading"></i>-->
                                <!--                                                <span>订单管理</span>-->
                                <!--                                            </template>-->
                                <!--                                        </el-menu-item>-->

                                <!--                                    </el-menu-item-group>-->


                                <!--                                </el-submenu>-->

                                <el-menu-item index="welcome">欢迎</el-menu-item>
                                <el-menu-item index="adminindex">首页</el-menu-item>

                            </el-menu>
                        </el-col>
                        <!--                       1-->

                    </el-row>
                </el-aside>
                <el-main style="">
                    <i style="width: 15px;height: 20px;" @click="change" class="el-icon-s-fold"></i>
                    <!--                    进行动态的展示-->
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>

    </div>
</template>

<style lang="less" scoped>
    /*@keyframes liner {*/
    /*    0% {*/
    /*        background-color: #ccfbff;*/
    /*        !*background: linear-gradient(to right, #ccfbff, #ef96c5) !important;*!*/

    /*    }*/
    /*    50% {*/
    /*        background-color: #ef96c5;*/
    /*        !*background: linear-gradient(to right, #ccfb2f, #ef95c5) !important;*!*/

    /*    }*/
    /*    100% {*/
    /*        background-color: #1ECE9C;*/
    /*        !*background: linear-gradient(to right, #cafb2f, #bf95c5) !important;*!*/

    /*    }*/
    /*}*/

    .background {
        /*transition: all 0.5s;*/
        /*animation-name: liner;*/
        background-color: #19AE88;
        /*animation-iteration-count: 100000;*/
        /*!*animation-fill-mode: backwards;*!*/
        /*animation-duration: 5s;*/
        /*animation-direction: alternate;*/

    }

    .el-header {
        /*border-bottom: 1px solid #304156!important;*/
        padding: 0 !important;;
        margin-bottom: 0 !important;
        margin: 0;

        div {
            border-bottom: 1px solid #CDCDCD;

            .guanli {
                line-height: 55px;
                margin-left: 10px;
                /*color: #4093FF;*/
                color: #95B6CF;
                font-weight: 600;
                font-size: 18px;
            }


        }
    }

    .el-aside {
        /*box-sizing: border-box !important;*/
        border-top: 1px solid #CDCDCD;
    }

</style>

<script>
    import jwtDecode from "jwt-decode";
    // import Global from "../../assets/js/Global";
    // import Global from "../../../public/static/Global";
    export default {
        data() {
            return {
                user: {},
                isCollapse: false,  // 导航菜单是否拦截
                permissionList: []
            }
        },
        created() {
            // this.getUserInfo();
            this.permissionList
                = JSON.parse(localStorage.getItem('permissionList'))
            // console.log(this.permissionList
            // )
            this.roleName = localStorage.getItem('roleName');
            let token = jwtDecode(localStorage.getItem('token'))
            // console.log()
            this.realname = token.realname;
        },
        methods: {
            toIndex() {
                this.$router.push('/')
            },
            change() {  // 折叠
                this.isCollapse = !this.isCollapse;
            }
            ,
            handleCommand() {
                // if (command === 'a') {
                //     this.$router.push('/')
                // } else if (command === 'b') {
                localStorage.removeItem('token')
                localStorage.removeItem('permissionList')
                localStorage.removeItem('roleName')
                this.$message.success('退出成功')
                this.$router.push('/')
            },
            getUserInfo() {
                // const token = localStorage.getItem('token')
                // const obj = jwtDecode(token)
                // this.user = obj;
                // this.user.avatar = Global.baseUrl + this.user.avatar


            }
        }
    }
</script>